<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏队列VS微队列</title>
</head>
<body>
<!--
    宏队列：[宏任务1, 宏任务2 ...]（宏任务有 定时器....）
    微队列：[微任务1, 微任务2 ...]（微任务现在仅有 Promise）
    规则：每次要执行宏队列里的一个任务之前，先看微队列里是否有待执行的微任务
        1. 如果有，先执行微任务
        2. 如果没有，按照宏队列里任务的顺序，依次执行（可能会出现新的微任务，规则不变，微任务先执行）
 -->
<script type="text/javascript">
    // 代码一
    /*
    setTimeout(() => {
        console.log('timeout')
    }, 0)
    Promise.resolve(1).then(
        value => {
            console.log('成功1', value)
        }
    )
    Promise.reject(2).catch(
        reason => {
            console.log('失败2', reason)
        }
    )
    console.log('主程序')

     */
    // 结果：主程序  成功1  失败2  timeout
    // 宏队列：timeout
    // 微队列：成功1 失败2


    // 代码二
    /*
    setTimeout(() => {
        console.log('timeout1')
    })
    setTimeout(() => {
        console.log('timeout2')
    })
    Promise.resolve(1).then(
        value => {
            console.log('成功1', value)
        }
    )
    Promise.reject(2).catch(
        reason => {
            console.log('失败2', reason)
        }
    )

     */
    // 结果：成功1 失败2 timeout1 timeout2
    // 宏队列：timeout1 timeout2
    // 微队列：成功1 失败2


    // 代码三
    setTimeout(() => {
        console.log('timeout1')
        Promise.resolve(5).then(
            value => {
                console.log('成功5', value)
            }
        )
    })
    setTimeout(() => {
        console.log('timeout2')
    })
    Promise.resolve(1).then(
        value => {
            console.log('成功1', value)
        }
    )
    Promise.reject(4).catch(
        reason => {
            console.log('失败4', reason)
        }
    )
    // 结果：成功1 失败4 timeout1 成功5 timeout5
    // 宏队列：（timeout1 成功5） timeout5
    // 微队列： 成功1 失败4
</script>
</body>
</html>
